<template>
  <div class="settings-page">
    <h2>通用设置</h2>
    
    <div class="settings-section">
      <n-form
        ref="formRef"
        :model="generalSettings"
        label-placement="left"
        label-width="160"
        require-mark-placement="right-hanging"
      >
        <!-- 界面设置 -->
        <n-divider>界面设置</n-divider>
        
        <n-form-item label="界面语言" path="language">
          <n-select
            v-model:value="generalSettings.language"
            :options="languageOptions"
            style="width: 200px"
          />
        </n-form-item>
        
        <n-form-item label="界面主题" path="theme">
          <n-select
            v-model:value="generalSettings.theme"
            :options="themeOptions"
            style="width: 200px"
          />
        </n-form-item>
        
        <n-form-item label="界面缩放" path="uiScale">
          <div class="scale-control">
            <n-slider
              v-model:value="generalSettings.uiScale"
              :step="5"
              :min="75"
              :max="150"
              style="width: 300px"
            />
            <span class="scale-value">{{ generalSettings.uiScale }}%</span>
          </div>
        </n-form-item>
        
        <n-form-item label="显示欢迎页" path="showWelcome">
          <n-switch v-model:value="generalSettings.showWelcome" />
        </n-form-item>
        
        <!-- 行为设置 -->
        <n-divider>行为设置</n-divider>
        
        <n-form-item label="启动时行为" path="startupBehavior">
          <n-select
            v-model:value="generalSettings.startupBehavior"
            :options="startupOptions"
            style="width: 300px"
          />
        </n-form-item>
        
        <n-form-item label="自动保存" path="autoSave">
          <n-switch v-model:value="generalSettings.autoSave" />
        </n-form-item>
        
        <n-form-item v-if="generalSettings.autoSave" label="自动保存间隔" path="autoSaveInterval">
          <n-input-number
            v-model:value="generalSettings.autoSaveInterval"
            :min="1"
            :max="60"
            style="width: 150px"
          >
            <template #suffix>分钟</template>
          </n-input-number>
        </n-form-item>
        
        <n-form-item label="退出时确认" path="confirmOnExit">
          <n-switch v-model:value="generalSettings.confirmOnExit" />
        </n-form-item>
        
        <n-form-item label="最大撤销次数" path="maxUndoSteps">
          <n-input-number
            v-model:value="generalSettings.maxUndoSteps"
            :min="10"
            :max="100"
            style="width: 150px"
          >
            <template #suffix>步</template>
          </n-input-number>
        </n-form-item>
        
        <!-- 其他设置 -->
        <n-divider>其他设置</n-divider>
        
        <n-form-item label="显示使用提示" path="showTips">
          <n-switch v-model:value="generalSettings.showTips" />
        </n-form-item>
        
        <n-form-item label="允许使用遥测" path="telemetry">
          <n-switch v-model:value="generalSettings.telemetry" />
        </n-form-item>
        
        <n-form-item label="日志级别" path="logLevel">
          <n-select
            v-model:value="generalSettings.logLevel"
            :options="logLevelOptions"
            style="width: 200px"
          />
        </n-form-item>
      </n-form>
      
      <div class="form-actions">
        <n-space>
          <n-button @click="resetToDefaults" quaternary>恢复默认设置</n-button>
          <n-button type="primary" @click="saveSettings">保存设置</n-button>
        </n-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import {
  NForm,
  NFormItem,
  NSelect,
  NSlider,
  NSwitch,
  NInputNumber,
  NButton,
  NSpace,
  NDivider
} from 'naive-ui'

const message = useMessage()
const formRef = ref(null)

// 通用设置表单
const generalSettings = reactive({
  language: 'zh-CN',
  theme: 'auto',
  uiScale: 100,
  showWelcome: true,
  startupBehavior: 'welcome',
  autoSave: true,
  autoSaveInterval: 5,
  confirmOnExit: true,
  maxUndoSteps: 50,
  showTips: true,
  telemetry: true,
  logLevel: 'info'
})

// 语言选项
const languageOptions = [
  { label: '简体中文', value: 'zh-CN' },
  { label: '繁體中文', value: 'zh-TW' },
  { label: 'English', value: 'en-US' },
  { label: '日本語', value: 'ja-JP' },
  { label: '한국어', value: 'ko-KR' }
]

// 主题选项
const themeOptions = [
  { label: '跟随系统', value: 'auto' },
  { label: '浅色主题', value: 'light' },
  { label: '深色主题', value: 'dark' },
  { label: '高对比度', value: 'highContrast' }
]

// 启动行为选项
const startupOptions = [
  { label: '显示欢迎页面', value: 'welcome' },
  { label: '打开上次的项目', value: 'lastProject' },
  { label: '显示项目列表', value: 'projectList' },
  { label: '新建空白项目', value: 'newProject' }
]

// 日志级别选项
const logLevelOptions = [
  { label: '详细 (Debug)', value: 'debug' },
  { label: '信息 (Info)', value: 'info' },
  { label: '警告 (Warning)', value: 'warning' },
  { label: '错误 (Error)', value: 'error' }
]

// 默认设置
const defaultSettings = {
  language: 'zh-CN',
  theme: 'auto',
  uiScale: 100,
  showWelcome: true,
  startupBehavior: 'welcome',
  autoSave: true,
  autoSaveInterval: 5,
  confirmOnExit: true,
  maxUndoSteps: 50,
  showTips: true,
  telemetry: true,
  logLevel: 'info'
}

// 加载设置
function loadSettings() {
  // 实际项目中，这里会从本地存储或API加载设置
  const savedSettings = localStorage.getItem('generalSettings')
  if (savedSettings) {
    try {
      const parsedSettings = JSON.parse(savedSettings)
      Object.assign(generalSettings, parsedSettings)
    } catch (error) {
      console.error('Failed to parse saved settings:', error)
    }
  }
}

// 保存设置
function saveSettings() {
  // 实际项目中，这里会调用API保存设置
  localStorage.setItem('generalSettings', JSON.stringify(generalSettings))
  message.success('设置已保存')
  
  // 应用设置
  applySettings()
}

// 应用设置
function applySettings() {
  // 应用主题
  document.documentElement.setAttribute('data-theme', generalSettings.theme)
  
  // 应用UI缩放
  document.documentElement.style.fontSize = `${generalSettings.uiScale / 100}rem`
  
  // 其他设置应用...
  console.log('Settings applied:', generalSettings)
}

// 恢复默认设置
function resetToDefaults() {
  Object.assign(generalSettings, defaultSettings)
  message.info('已恢复默认设置')
}

// 组件挂载时加载设置
onMounted(() => {
  loadSettings()
})
</script>

<style lang="scss" scoped>
.settings-page {
  padding: 0 16px;
  
  h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-weight: 500;
  }
  
  .settings-section {
    max-width: 800px;
  }
  
  .scale-control {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .scale-value {
      min-width: 50px;
    }
  }
  
  .form-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
  }
}
</style> 